<html>
  <head>
    
    <style>
      body {
      margin: 0;
      padding: 0;
      }
      .nav-bar {
      width: 100%;
      height: 70px;
      background: #333;
      line-height: 70px;
      }
      .nav-bar ul {
      width: 80%;
      list-style: none;
      margin: 0 auto;
      padding: 0;
      }
      
      .nav-bar ul li {
      color: #fff;
      background: #333;
      float: left;
      width: 100px;
      font-size: 30px;
      cursor: pointer;
      text-align: center;
      }

      .nav-bar .nav-hover {
      background: #fdfdfd;
      color: #333;
      float: left;
      width: 100px;
      font-size: 30px;
      cursor: pointer;
      text-align: center;
      }
    </style>
    
    <script type='text/javascript'>
      window.onload = function() {
      //window.document.getElementById("home").className = 'nav-hover';
      }      
    </script>
  </head>
  
  <body>
    <div class='nav-bar'>
      <ul>
	<a href='/home.html'><li id='home' class='nav-hover'>Home</li></a>
        <a href='/news.html'><li>News</li></a>
        <a href='/post.html'><li>Post</li></a>
      </ul>
    </div>
    
  </body>
</html>
